
import React from 'react';
import { Layout } from 'antd';
import { Menu } from 'antd';
import { useNavigate } from 'react-router-dom';
import { Outlet } from 'react-router-dom'
import '../../styles/home.scss'

import { SettingOutlined } from "@ant-design/icons";
const { Header, Footer, Sider, Content } = Layout;
// 用interface声明对象类型
interface Props { }
interface MenuItem {
  item: object;
  key: string;
}
function Home(props: Props) {
  var navigate = useNavigate();
  var handleClick = function ({ item, key }: MenuItem) {
    console.log(key);
    navigate(key);
  };
  return (
    <div>
      <Layout className="home">
        <Sider>
          <Menu
            className="mymenu"
            theme="light"
            mode="inline"
            defaultSelectedKeys={["/index/home/chart"]}
            onClick={handleClick}
          >
            <Menu.Item key="/index/home/chart">报表</Menu.Item>
            {/* 盘点管理 */}
            <Menu.SubMenu key="0" title="盘点管理" icon={<SettingOutlined />}>
              <Menu.Item key="/index/home/inventory">盘点列表</Menu.Item>
              <Menu.Item key="/index/home/inventorytype">
                盘点类型列表
              </Menu.Item>
            </Menu.SubMenu>
            {/* 入库管理 */}
            <Menu.SubMenu key="1" title="入库管理" icon={<SettingOutlined />}>
              <Menu.Item key="/index/home/getintolist">
                入库单列表
              </Menu.Item>
              {/* <Menu.Item key="1">入库单审核</Menu.Item>
              <Menu.Item key="1">入库类型列表</Menu.Item> */}
            </Menu.SubMenu>
            {/* 出库管理 */}
            <Menu.SubMenu
              key="/index/home/deposit/depositList"
              title="出库管理"
              icon={<SettingOutlined />}
            >
              <Menu.Item key="/index/home/deposit/depositList">
                出库单列表
              </Menu.Item>
              <Menu.Item key="/index/home/deposit/depositExamine">
                出库单审核
              </Menu.Item>
              <Menu.Item key="/index/home/deposit/depositTypeList">
                出库类型列表
              </Menu.Item>
            </Menu.SubMenu>
            {/* 损溢管理 */}
            <Menu.SubMenu key="3" title="损溢管理" icon={<SettingOutlined />}>
              <Menu.Item key="/index/home/losslist" >损溢单列表</Menu.Item>
              <Menu.Item key="/index/home/examine" >损溢单审核</Menu.Item>
              <Menu.Item key="/index/home/typelist" >损溢单类型列表</Menu.Item>
            </Menu.SubMenu>
            {/* 库存调拨管理 */}
            <Menu.SubMenu key="4" title="库存调拨管理" icon={<SettingOutlined />}>
              <Menu.Item key="/index/home/AllocateManagement">库存调拨管理</Menu.Item>
              <Menu.Item key="/index/home/AllocateList">库存调拨单列表</Menu.Item>
              <Menu.Item key="/index/home/AllocateAudit">库存调拨单审核</Menu.Item>
            </Menu.SubMenu>
            {/* 仓库管理 */}
            <Menu.SubMenu title="仓库管理" icon={<SettingOutlined />}>
              <Menu.Item key="/index/home/stocklist">仓库库存列表</Menu.Item>
              {/* <Menu.Item key="5">仓库列表</Menu.Item> */}
            </Menu.SubMenu>
          </Menu>
        </Sider>
        <Content style={{ padding: 20 }}>
          <Outlet />
        </Content>
      </Layout>
    </div>
  );
}

export default Home;
